<template>
  <div class="tast-detail">
    <div class="nav-bar">
      <span class="alltitle">
        <router-link to="项目列表">项目列表</router-link>>预备员工专区>
        <router-link to="/task">新手任务</router-link>>新人列表
      </span>
      <span class="download-button" @click="exportExcel">上传资料批量导出</span>
    </div>
    <div class="name-title">{{allData.name}}</div>
    <div class="table">
      <div class="title">
        <span class="left-one">状态</span>
        <span class="left-two">任务</span>
        <span class="left-three">详情</span>
        <span class="left-four">操作</span>
      </div>
      <!-- list -->
      <div class="list" v-for="(item, index) in listData" :key="index">
        <span class="left-one">{{status[allData.get_xsrw_status[item[0]]]}}</span>
        <span class="left-two">{{nameMap[item[0]]}}</span>
        <span class="left-three">
          <span v-if="!Array.isArray(item[1])">{{item[1]}}</span>
          <div v-if="Array.isArray(item[1])">
            <div v-for="(itemB, index) in item[1]" :key="index">
              <div class="second-list" v-if="itemB.type == 'input'">{{itemB.title}}：{{itemB.value}}</div>
              <div class="second-list" v-if="itemB.type == 'photo'">
                {{itemB.title}}：
                <span class="see-img" @click="imgLook(itemB.photo)">查看</span>
              </div>
              <div class="second-list" v-if="itemB.type == 'bool'">
                {{itemB.title}}：
                <span v-if="itemB.value">是</span>
                <span v-if="!itemB.value">否</span>
              </div>
              <div class="second-list" v-if="itemB.type == 'tasklist'">
                <div v-for="(itemC, index) in itemB.list" :key="index">
                  {{itemC.task}}：
                  <span v-if="itemC.value">是</span>
                  <span v-if="!itemC.value">否</span>
                </div>
              </div>
            </div>
          </div>
        </span>
        <span class="left-four">
          <span class="button" @click="doPass(item[0], 3)" v-if="allData.get_xsrw_status[item[0]] == 1">通过</span>
          <span class="button" @click="doPass(item[0], 2)" v-if="allData.get_xsrw_status[item[0]] == 1">不通过</span>
          <span class="disable-button" v-if="allData.get_xsrw_status[item[0]] != 1">通过</span>
          <span class="disable-button" v-if="allData.get_xsrw_status[item[0]] != 1">不通过</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      allData: {},
      nameMap: {
        en_name: "英文名",
        identity_card: "身份证",
        archives: "档案迁移",
        household: "迁移户口",
        employment_agreement: "就业协议书电子档",
        entry_health_examination: "入职体检",
        employ: "录用资料",
        party: "是否党员",
        bank_card: "中国银行储蓄卡",
        // diploma: "毕业证、学位证",
		position_information: "入职信息采集表"
      },
      status: {
        0: "未上传",
        1: "未审核",
        2: "未通过",
        3: "已通过"
      }
    };
  },
  methods: {
    imgLook(imgList) {
      this.$Modal.info({
        title: "<div>图片查看</div>",
        content: imgList.map(img=>`<img style="max-width:100%;display:block;margin: 10px 0;" src="https://evp.51job.com/51job/api/51miniadmin/${img}"/>`).join(''),
      });
    },
    doPass: function(target, status) {
		console.log("target",target);
      $.post("https://evp.51job.com/51job/api/1.0/index.php/minirs/xsrw_status/setStatus", {
        information_id: this.allData.id,
        project_id: this.allData.project_id,
        [target]: status,
		field:target,
		type:status,
      }).then(res => {
        location.reload();
      })
    },
    exportExcel: function() {
      window.open("https://evp.51job.com/51job/api/1.0/index.php/minirs/Xsrw_information/getZip?information_id="+this.$route.params.id);
    }
  },
  created() {
    $.get(
      "https://evp.51job.com/51job/api/1.0/index.php/minirs/Xsrw_information/getone", {
        information_id: this.$route.params.id
      }
    ).then(res => {
      this.allData = res.data;
	  console.log("this.allData",this.allData);
      const {
        en_name,
        identity_card,
        archives,
        household,
        employment_agreement,
        entry_health_examination,
        employ,
        party,
        bank_card,
        // diploma,
		position_information
      } = res.data;
      this.listData = Object.entries({
        en_name,
        identity_card,
        archives,
        household,
        employment_agreement,
        entry_health_examination,
        employ,
        party,
        bank_card,
        // diploma,
		position_information
      });
	  console.log("this.listData",this.listData);
    });
  }
};
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.nav-bar .download-button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  color: white;
  background: #3091f2;
}

.name-title {
  font-size: 20px;
  margin: 20px 0 0 10%;
}

.table {
  width: 80%;
  margin: 20px auto 0;
}

.table .left-one {
  display: inline-block;
  width: 120px;
}

.table .left-two {
  display: inline-block;
  width: 240px;
}

.table .left-three {
  display: inline-block;
  width: 480px;
}

.table .left-four {
  display: inline-block;
  width: 360px;
}

.table .title,
.table .list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 10px;
}

.table .title {
  font-weight: bold;
}

.table .list {
  border-top: 1px rgb(221, 221, 221) solid;
}

.table .list .second-list {
  margin: 5px 0;
}

.table .list .second-list .see-img {
  display: inline-block;
  width: 40px;
  height: 20px;

  line-height: 20px;
  text-align: center;
  color: white;
  background: #5cadff;
}

.table .list .button,
.table .list .disable-button {
  display: inline-block;
  width: 50px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  margin-right: 10px;
  color: white;
  background: #3091f2;
}

.table .list .disable-button {
  background: #c5c8ce;
}

.table .list .button:hover,
.nav-bar .download-button:hover,
.table .list .second-list .see-img:hover {
  cursor: pointer;
}

.table .list .button:hover,
.nav-bar .download-button:hover {
  cursor: pointer;
}
</style>